<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style type="text/css">
         #big{
           background-color:white;
           margin: 0 auto;
           width: 1200px;

         }
         table{
            border-collapse: separate;
            border-spacing: 30px;
        }
         #form{
           background-color:white;
           width: 600px;
           margin-left: 375px;
           margin-right: 375px;
           margin-top:30px ;
        }
        #register{
             width: 250px;
            height: 40px;
            background-color:crimson;
            font-size: larger;
            color: white;
            margin-top: 15px;
            margin-left: 125px;
        }
    </style>
    <script type="text/javascript">
        function checkForm() {
            var phone=checkPhone();
            var password=checkPw();
            var passwords=checkPws();
            return phone && password && passwords;
        }
        function checkPhone() {
            var userPhone=document.getElementById('userPhone');
            var phoneErr=document.getElementById('phoneErr');
            var pattern=/^1[34578]\d{9}$/; //验证手机号正则表达式
            if (!pattern.test(phone.value)){
                phoneErr.innerHTML="手机号码不正确"
                phoneErr.className="error"
                return false;
            }
             else {
                 phoneErr.innerHTML='OK'
                 phoneErr.className='success'
                return true;
            }
        }
    </script>
</head>
<body>
     <div id="big">
         <div>
             <h1 style="font-size: 30px">酷阅小说网|<span style="font-size: 20px">用户注册</span></h1>
         </div>
         <div>
             <h2 align="center" style="margin-top: 90px">注册信息</h2>
         </div>
         <div id="form">
            <form onSubmit="return checkForm()" action="yan.html" method="post">
            <table>
                <tr>
                   <td> <lable for="userPhone">手机号</lable></td>
                    <td><input type="text" id="phone" name="phone" onblur="checkPhone()" style="width: 250px;height: 30px;font-size:1em"></td>
                    <td><span  id="phoneErr">请输入11位手机号</span></td>
                </tr>

                <tr>
                    <td>短信验证</td>
                    <td><input type="text"  id="message" name="message" onblur="checkMessage()" style="width: 250px;height: 30px;font-size:1em"></td>
                    <td><input type="submit" value="获取验证码" style="height: 30px"></td>
                </tr>

                <tr>
                    <td>密码</td>
                    <td><input type="password" id="password" name="password" onblur="checkPw()" style="width: 250px;height: 30px;font-size:1em"></td>
                    <td><span id="pwErr" >请输入4-8位密码</span></td>
                </tr>

                <tr>
                    <td>确认密码</td>
                    <td><input type="password" id="passwords" name="passwords" onblur="checkPws()"  style="width: 250px;height: 30px;font-size:1em"></td>
                    <td><span  id="pwsErr">再次输入密码</span></td>
                </tr>

            </table>

             <div>
                 <input type="checkbox" style="margin-left: 130px"><label>我已阅读并同意</label><a href="" style="text-decoration: none">《用户服务手册》</a>
             </div>
             <div>
                 <input id="register" type="submit" value="注册">
             </div>
             </form>
         </div>
     </div>
</body>
</html>